<!--  -->
<template>
  <div class="box">
    <div class="listed">
      <h3>上市公司</h3>
      <ul class="cards">
        <li v-for="card in cards" :key="card.index">
          <div class="tops">
            <h4>{{ card.name }}</h4>
            <p>{{ card.num }}</p>
          </div>
          <p class="txts">
            {{ card.text }}
          </p>
          <span class="chan">查看详情</span>
        </li>
      </ul>
    </div>
    <div class="listed">
      <h3>高精企业</h3>
      <ul class="cards">
        <li v-for="card in cards" :key="card.index">
          <div class="tops">
            <h4>{{ card.name }}</h4>
            <p>{{ card.num }}</p>
          </div>
          <p class="txts">
            {{ card.text }}
          </p>
          <span class="chan">查看详情</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      cards: [
        {src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
        {
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
        {
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
        {
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
        {
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
        {
          name: '科技型中小企业',
          num: '329801家',
          text: '以科技人员为主体，由科技人员领办和创办，主要从事高新技术产品的科学研究、研制、生产、销售；以科技成果商品化及技术开发、技术服务、技术咨询和高新产品为主要内容，以市场为导向。实行“自筹资金、自愿组合、……”',
        },
      ],
    }
  },
  created() {},
  methods: {},
  beforeDestroy() {},
}
</script>

<style lang='scss' scoped>
.box {
  margin: 0;
  padding: 0;
  .listed {
    width: 100%;
    display: flex;
    height: auto;
    flex-direction: column;
    background: #ffffff;
    h3 {
      margin: 29px 0 0 31px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      text-align: left;
      color: #444451;
      line-height: 22px;
      letter-spacing: 0.02px;
    }
    .cards {
      width: 100%;
      height: auto;
      display: flex;
      flex-grow: 1;
      justify-content: space-around;
      flex-wrap: wrap;
      li {
        width: 31%;
        height: 135px;
        margin-top: 21px;
        position: relative;
        top: 0;
        left: 0;
        border: 1px solid #d5dae3;
        border-radius: 10px;
        .tops {
          margin: 17px 0 11px 20px;
          display: flex;
          height: 22px;
          h4 {
            height: 22px;
            margin-right: 12px;
            font-size: 16px;
            font-family: PingFangSC, PingFangSC-Semibold;
            font-weight: 600;

            color: #444451;
            line-height: 22px;
            letter-spacing: 0.02px;
          }
          p {
            margin-top: 5px;
            font-size: 12px;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;

            color: #8c8e90;
            line-height: 17px;
            letter-spacing: 0.02px;
          }
        }
        .txts {
          margin-left: 20px;
          font-size: 12px;
          font-size: 12px;
font-family: PingFangSC, PingFangSC-Regular;
font-weight: 400;
text-align: justify;
color: #8c8e90;
line-height: 17px;
letter-spacing: 0.02px;
        }
        .chan {
          width: 49px;
          height: 17px;
          display: block;
          position: absolute;
          top: 17px;
          right: 19px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
